<!doctype html>
<!--
/*************************************************************************
* ADOBE CONFIDENTIAL
* ___________________
*
* Copyright 2014 Adobe Inc.
* All Rights Reserved.
*
* NOTICE: Adobe permits you to use, modify, and distribute this file in
* accordance with the terms of the Adobe license agreement accompanying
* it. If you have received this file from a source other than Adobe,
* then your use, modification, or distribution of it requires the prior
* written permission of Adobe. 
**************************************************************************/
-->
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Bootstrap</title>
  <link rel="stylesheet" type="text/css" href="css/app.css">
  <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="css/bootstrap-responsive.min.css">
</head>
<body>
<div class="navbar">
  <div class="navbar-inner">
    <a class="brand" href="index.html">UI</a>
    <ul class="nav">
      <li><a href="jqueryui.html">jQuery UI</a></li>
      <li class="active"><a href="bootstrap.html">Bootstrap</a></li>
      <li><a href="canvas.html">Canvas</a></li>
    </ul>
  </div>
</div>
<div class="container-fluid"  style="padding:0px 20px;">
  <div class="row-fluid">
    <div class="span12">
      <h3>
        h3. Lorem ipsum dolor sit amet.
      </h3>
      <div class="btn-group dropup">
         <button class="btn">Action</button> <button data-toggle="dropdown" class="btn dropdown-toggle"><span class="caret"></span></button>
        <ul class="dropdown-menu">
          <li>
            <a href="#">Action</a>
          </li>
          <li>
            <a href="#">Another action</a>
          </li>
          <li>
            <a href="#">Something else here</a>
          </li>
          <li class="divider">
          </li>
          <li class="dropdown-submenu">
             <a tabindex="-1" href="#">More options</a>
            <ul class="dropdown-menu">
              <li>
                <a href="#">Action</a>
              </li>
              <li>
                <a href="#">Another action</a>
              </li>
              <li>
                <a href="#">Something else here</a>
              </li>
            </ul>
          </li>
        </ul>
      </div>
      <form class="form-search">
        <input type="text" class="input-medium search-query" /> <button type="submit" class="btn">Search</button>
      </form> <a href="#" class="btn" type="button">Button</a>
      <form>
        <fieldset>
           <legend>Legend</legend> <label>Label name</label><input type="text" /> <span class="help-block">Example block-level help text here.</span> <label class="checkbox"><input type="checkbox" /> Check me out</label> <button type="submit" class="btn">Submit</button>
        </fieldset>
      </form>
      <form class="form-horizontal">
        <div class="control-group">
           <label class="control-label" for="inputEmail">Email</label>
          <div class="controls">
            <input type="text" id="inputEmail" />
          </div>
        </div>
        <div class="control-group">
           <label class="control-label" for="inputPassword">Password</label>
          <div class="controls">
            <input type="password" id="inputPassword" />
          </div>
        </div>
        <div class="control-group">
          <div class="controls">
             <label class="checkbox"><input type="checkbox" /> Remember me</label> <button type="submit" class="btn">Sign in</button>
          </div>
        </div>
      </form>
    </div>
  </div>
  <div class="row-fluid">
    <div class="span12">
      <div class="btn-group">
         <button class="btn" type="button"><em class="icon-align-left"></em></button> <button class="btn" type="button"><em class="icon-align-center"></em></button> <button class="btn" type="button"><em class="icon-align-right"></em></button> <button class="btn" type="button"><em class="icon-align-justify"></em></button>
      </div>
      <blockquote>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
        </p> <small>Someone famous <cite>Source Title</cite></small>
      </blockquote>
      <ol>
        <li>
          Lorem ipsum dolor sit amet
        </li>
        <li>
          Consectetur adipiscing elit
        </li>
        <li>
          Integer molestie lorem at massa
        </li>
        <li>
          Facilisis in pretium nisl aliquet
        </li>
        <li>
          Nulla volutpat aliquam velit
        </li>
        <li>
          Faucibus porta lacus fringilla vel
        </li>
        <li>
          Aenean sit amet erat nunc
        </li>
        <li>
          Eget porttitor lorem
        </li>
      </ol>
      <table class="table">
        <thead>
          <tr>
            <th>
              #
            </th>
            <th>
              Product
            </th>
            <th>
              Payment Taken
            </th>
            <th>
              Status
            </th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>
              1
            </td>
            <td>
              TB - Monthly
            </td>
            <td>
              01/04/2012
            </td>
            <td>
              Default
            </td>
          </tr>
          <tr class="success">
            <td>
              1
            </td>
            <td>
              TB - Monthly
            </td>
            <td>
              01/04/2012
            </td>
            <td>
              Approved
            </td>
          </tr>
          <tr class="error">
            <td>
              2
            </td>
            <td>
              TB - Monthly
            </td>
            <td>
              02/04/2012
            </td>
            <td>
              Declined
            </td>
          </tr>
          <tr class="warning">
            <td>
              3
            </td>
            <td>
              TB - Monthly
            </td>
            <td>
              03/04/2012
            </td>
            <td>
              Pending
            </td>
          </tr>
          <tr class="info">
            <td>
              4
            </td>
            <td>
              TB - Monthly
            </td>
            <td>
              04/04/2012
            </td>
            <td>
              Call in to confirm
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  <div class="row-fluid">
    <div class="span12">
      <ul class="breadcrumb">
        <li>
          <a href="#">Home</a> <span class="divider">/</span>
        </li>
        <li>
          <a href="#">Library</a> <span class="divider">/</span>
        </li>
        <li class="active">
          Data
        </li>
      </ul>
      <div class="media">
         <a href="#" class="pull-left"><img src="http://lorempixel.com/64/64/" class="media-object" alt='' /></a>
        <div class="media-body">
          <h4 class="media-heading">
            Nested media heading
          </h4> Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
        </div>
      </div>
      <ul class="nav nav-list">
        <li class="nav-header">
          List header
        </li>
        <li class="active">
          <a href="#">Home</a>
        </li>
        <li>
          <a href="#">Library</a>
        </li>
        <li>
          <a href="#">Applications</a>
        </li>
        <li class="nav-header">
          Another list header
        </li>
        <li>
          <a href="#">Profile</a>
        </li>
        <li>
          <a href="#">Settings</a>
        </li>
        <li class="divider">
        </li>
        <li>
          <a href="#">Help</a>
        </li>
      </ul>
      <ul class="nav nav-tabs">
        <li class="active">
          <a href="#">Home</a>
        </li>
        <li>
          <a href="#">Profile</a>
        </li>
        <li class="disabled">
          <a href="#">Messages</a>
        </li>
        <li class="dropdown pull-right">
           <a href="#" data-toggle="dropdown" class="dropdown-toggle">Dropdown<strong class="caret"></strong></a>
          <ul class="dropdown-menu">
            <li>
              <a href="#">Action</a>
            </li>
            <li>
              <a href="#">Another action</a>
            </li>
            <li>
              <a href="#">Something else here</a>
            </li>
            <li class="divider">
            </li>
            <li>
              <a href="#">Separated link</a>
            </li>
          </ul>
        </li>
      </ul>
      <div class="alert">
         <button type="button" class="close">×</button>
        <h4>
          Alert!
        </h4> <strong>Warning!</strong> Best check yo self, you're not looking too good.
      </div>
    </div>
  </div>
</div>
</body>
<script src="js/bootstrap.js"></script>
<script src="js/main.js"></script>
</html>